import React from "react";
import { Pagination } from "element-react";
import {
  base,
  desUrl,
  bannerDes,
  codeDes,
  cxDes,
  lifeDes,
  alldes,
  gjDes,
} from "../../utils/paths";
import "./des.less";
import axios from "axios";
import Editor from "for-editor";
const useEffect = React.useEffect;
const useState = React.useState;
function Des(props) {
  let [info, setInfo] = useState({ name: "", time: "", con: "" });
  let [type, setType] = useState("");
  let [id, setId] = useState(0);
  let [url, setUrl] = useState("");
  let [tits, settits] = useState([]);
  useEffect(() => {
    document.documentElement.scrollTop = 0;
    let s: string = props.location.search;
    let result: Array<any> = s.split("&");
    let id: number = result[0].split("=")[1];
    let type: string = decodeURIComponent(result[1].split("=")[1]);
    setType(type);
    setId(id);
    if (type == "banner") {
      setUrl(bannerDes);
    }
    if (type == "编程分享") {
      setUrl(codeDes);
    }
    if (type == "程序人生") {
      console.log(cxDes);
      setUrl(cxDes);
    }
    if (type == "生活日记") {
      setUrl(lifeDes);
    }
    if (type == "综合文章") {
      setUrl(alldes);
    }
    if (type == "最新文章") {
      setUrl(alldes);
    }
    if (type == "工具推荐") {
      setUrl(gjDes);
    }
  }, []);
  useEffect(() => {
    if (url) {
      axios
        .get(url, {
          params: {
            id: id,
          },
        })
        .then((res) => {
          let data = res.data;
          setInfo(data.msg[0]);
        });
    }
  }, [url]);

  useEffect(() => {
    if (info.con.length > 0) {
      let dom: Element = document.getElementsByClassName(
        "for-markdown-preview"
      )[0];
      let titdatas = [];
      for (let i = 0; i < dom.children.length; i++) {
        let name: string = dom.children[i].nodeName;
        let con: string = dom.children[i].textContent;
        if (
          name == "H1" ||
          name == "H2" ||
          name == "H3" ||
          name == "H4" ||
          name == "H5"
        ) {
          let d: any = dom.children[i];
          let isac = titdatas.length == 0 ? true : false;
          titdatas.push({
            isac: isac,
            name: con,
            level: parseInt(name.substring(1)),
            tag: name.toLocaleLowerCase(),
            top: d.offsetTop + 200,
            index: i,
          });
        }
      }
      settits(titdatas);
    }
  }, [info.con]);

  //   function usejl(time) {
  //     let start: any = new Date();
  //     let end: any = new Date();
  //     return function (fn) {
  //       end = new Date();
  //       if (end - start > time) {
  //         fn.call(this);
  //         start = end;
  //       }
  //     };
  //   }
  function bindevent(){
    const top = document.documentElement.scrollTop;
    for (let i = 0; i < tits.length; i++) {
      if (i == 0) {
        if (top >= 0 && top < tits[i + 1]["top"]) {
          for (let j = 0; j < tits.length; j++) {
            tits[j]["isac"] = false;
          }
          tits[i]["isac"] = true;
        }
      } else if (i == tits.length - 1) {
        if (top >= tits[i]["top"]) {
          for (let j = 0; j < tits.length; j++) {
            tits[j]["isac"] = false;
          }
          tits[i]["isac"] = true;
        }
      } else {
        if (top >= tits[i]["top"] && top < tits[i + 1]["top"]) {
          for (let j = 0; j < tits.length; j++) {
            tits[j]["isac"] = false;
          }
          tits[i]["isac"] = true;
        }
      }
    }
    settits(tits.concat([]));
  }
  useEffect(() => {
      if (tits.length > 0) {       
        window.addEventListener('scroll',bindevent,false)
    };
    return () => {
      window.removeEventListener('scroll',bindevent,false)
    };
  }, [tits]);
  // let obj:any = {
  //     __html:info.con
  // }

  function setstr(num: number) {
    let str = "";
    for (let i = 0; i < num; i++) {
      str += " - ";
    }
    return str;
  }
  return (
    <div id="Des">
      <div className="des_con">
        <p style={{ paddingTop: "20px" }}>
          <span
            onClick={() => {
              props.history.go(-1);
            }}
          >
            <span className="el-icon-arrow-left"></span>
            <span style={{ marginLeft: "10px", marginTop: "10px" }}>
              返回上一级
            </span>
          </span>
        </p>
        <p className={"des_title"}>{info.name}</p>
        <div className={"des_con"}>
          <Editor
            height={"auto"}
            value={info.con}
            preview={true}
            toolbar={{}}
          ></Editor>
        </div>
        <div className={"des_time"}>{info.time}</div>
        <img
          src="./img/backt.svg"
          className="backT"
          onClick={() => {
            var t = setInterval(() => {
              if (document.documentElement.scrollTop == 0) {
                document.documentElement.scrollTop = 0;
                clearInterval(t);
              }
              document.documentElement.scrollTop -= 60;
            }, 10);
          }}
        />
      </div>
      <div className="des_aside">
        {tits.length > 0 ? (
          <ul>
            {tits.map((v: any, index: number) => {
              // console.log(v);
              return (
                <li
                  className={v.isac?"ac":"noac"}
                  onClick={() => {
                    for(let i=0;i<tits.length;i++){
                      tits[i].isac = false;
                    }
                    tits[index].isac = true;
                    settits(tits.concat([]));
                    var t = setInterval(() => {
                      if (
                        document.documentElement.scrollTop >= v.top - 30 &&
                        document.documentElement.scrollTop <= v.top + 30
                      ) {
                        document.documentElement.scrollTop = v.top - 10;
                        clearInterval(t);
                      }
                      
                      if (
                        document.documentElement.scrollTop +
                          window.screen.height >=
                        document.documentElement.scrollHeight
                      ) {
                        
                        clearInterval(t);
                      }
                      if (document.documentElement.scrollTop > v.top) {
                        document.documentElement.scrollTop -= 60;
                      } else {
                        document.documentElement.scrollTop += 60;
                      }
                      // document.documentElement.scrollTop-=60;
                    }, 1);
                  }}
                  key={index}
                >
                  {<span>{setstr(v.level)}</span>}{" "}
                  {
                    <v.tag
                      style={{ overflow: "hidden", textOverflow: "ellipsis" }}
                    >
                      {v.name}
                    </v.tag>
                  }
                </li>
              );
            })}
          </ul>
        ) : (
          "暂无title内容"
        )}
      </div>
    </div>
  );
}
export default Des;
